import React, { PureComponent } from 'react';
import { Chart, Geom, Axis, Tooltip, Label } from 'bizcharts';
import style from './index.less';

class AppSmsWeekly extends PureComponent {
  render() {
    const { smsChartData, smsFailureRatio } = this.props;
    const smsDataScale = {
      y: {
        tickCount: 5,
        alias: '条数',
        type: 'pow',
      },
    };

    const smsFailureScale = {
      y: {
        tickCount: 5,
        alias: '失败率',
        type: 'pow',
      },
    };

    const smsFailureTooltipCfg = {
      custom: true,
      containerTpl: `<div class="g2-tooltip"><div class="g2-tooltip-title" style="margin-bottom: 4px;"></div><ul class="g2-tooltip-list"></ul></div>`,
      itemTpl: `<li data-index={index}><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: {value}%</li>`,
    };

    return smsChartData.length > 0 ? (
      <div style={{ height: 385 }}>
        <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'left' }}>
          <Chart height={300} data={smsChartData} scale={smsDataScale} forceFit>
            <span className={style.mainTitle}>一周短信发送数量(条)</span>
            <Axis name="x" />
            <Axis name="y" />
            <Tooltip
              crosshairs={{
                type: 'y',
              }}
            />
            <Geom type="line" position="x*y" size={2} />
            <Geom
              type="point"
              position="x*y"
              size={4}
              shape="circle"
              style={{
                stroke: '#fff',
                lineWidth: 1,
              }}
            >
              <Label
                content={['x*y', (x, y) => `${y}`]}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                  fill: '#404040', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'normal', // 文本粗细
                  rotate: 0, // 文字旋转
                  textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                }}
              />
            </Geom>
          </Chart>
        </div>
        <div style={{ padding: '20px', background: '#FFFFFF', width: '49.5%', float: 'right' }}>
          <Chart height={300} data={smsFailureRatio} scale={smsFailureScale} forceFit>
            <span className={style.mainTitle}>一周短信发送失败率(%)</span>
            <Axis name="x" />
            <Axis name="y" />
            {/* <Tooltip
              crosshairs={{
                type: 'y',
              }}
            /> */}
            <Tooltip {...smsFailureTooltipCfg} />

            <Geom type="line" position="x*y" size={2} color="#FF4500" shape="smooth" />
            <Geom
              type="point"
              position="x*y"
              size={4}
              shape="circle"
              color="#FF4500"
              style={{
                stroke: '#FF6347',
                lineWidth: 1,
              }}
            >
              <Label
                content={['x*y', (x, y) => `${y}%`]}
                textStyle={{
                  textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                  fill: '#404040', // 文本的颜色
                  fontSize: '12', // 文本大小
                  fontWeight: 'normal', // 文本粗细
                  rotate: 0, // 文字旋转
                  textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
                }}
              />
            </Geom>
          </Chart>
        </div>
      </div>
    ) : (
      <div style={{ height: 80 }}>
        <div
          style={{
            padding: '20px',
            background: '#FFFFFF',
            width: '49.5%',
            float: 'left',
            textAlign: 'center',
          }}
        >
          一周短信发送数量暂无数据
        </div>
        <div
          style={{
            padding: '20px',
            background: '#FFFFFF',
            width: '49.5%',
            float: 'right',
            textAlign: 'center',
          }}
        >
          一周短信发送失败率暂无数据
        </div>
      </div>
    );
  }
}
export default AppSmsWeekly;
